<template>
  <div class="accidentDistribution-root">
    <formTitleVue
      title="事故区域分布"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-accidentDistribution"></div> -->
    <myLine domId="accident-accidentDistribution-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myLine from '@/components/Echarts/myLine.vue';
import { time_select_optios } from '@/utils/global.js';
import { accidentDistribution } from '@/api/risk/accidentCases'
export default {
  name: "accidentDistribution",
  components: {
    formTitleVue,myLine,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ]
        }
      ],
      chartsData: {
        xData: [],
        yData: [],
      },
      echartsOption:{
        legend:{
          show:false,
        }
      },
      searChForm: {
        startTime: '',
        endTime: '',
      },
    };
  },
  methods: {
    selectChange(item) {
      // console.log(item);
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.searChForm.areaCode = this.$store.state.account.user.deptIds;
      this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
      this.getData()
    },
    getData() {
      // console.log(this.searChForm)
      accidentDistribution(this.searChForm).then(res=>{
          if(res.code==200){
              this.chartsData.xData = res.data.xAxle
              this.chartsData.yData = res.data.data
          }
      })
    },
  },
  mounted() {
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.accidentDistribution-root {
  #echarts-accidentDistribution {
    height: 30vh;
  }
}
</style>
